<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>课堂回课</title>

		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		
		
		<style>
			.width{
				width: 100%;
			}
			.span1{
				color: #2cc7fd;
				font-size: larger;
			}
			.span2{
				color: #a3a3a3;
				font-size: small;
			}
			.span3{
				font-size: x-larger;
			}
			.margin-5px{
				margin-top: 5px;
			}
			.img1{
				width: 50px;
				margin: 10px;
			}
			.img2{
				margin-left: 5px;
				width: 100px;
				height: 100px;
			}
			.div1{
				padding: 5px;
				margin-top: 10px;
			}
			.div2{
				width: 100px;
				height: 100px; 
				background-image: url(../img/bg-01.png);
				background-size: 100% 100%;
				background-repeat:no-repeat;
			}
			.div3{
				height: 100%;
				background:#a3a3a3; 
				filter:alpha(Opacity=60);
				-moz-opacity:0.3;
				opacity: 0.3;
			}
			.div4{
				background-image: url(../img/play-2.png);
				background-size: 100% 100%;
				background-repeat:no-repeat;
				width: 70px;
				height: 70px;
				margin: 0 auto;
				text-align: center;
			}
			.button1{
				background-color: #00d5c5;
				float: right;
				color: #EEEEEE;
				width: 80px;
			}
			.magin-120{
				margin-top: 120%;
			}
			.width-30{
				width: 30px;
			}
			
		</style>
		
	</head>

	<body>
		<div class="flex h-center div1" >
			<div class="flex-1">
				<img class="width" src="../img/head-01.png" />

			</div>
			<div class="flex-4">
				<div>
					<span class="span1">王大珂</span>
					<span class="span2">3小时前</span>
				</div>
				<div class="margin-5px">
					<span class="span3">贝多芬的悲伤</span>
				</div>
				<div id="id1" class="flex margin-5px">
					<div class="flex-1 div2">
						<div class="flex v-center width div3">
							<div class="div4">
								<img class="img1" src="../img/play-1.png" />
							</div>
						</div>
					</div>
					<img class="flex-1 img2" src="../img/bg-02.png" />
				</div>

			</div>
			<div class="flex-2">

				<button type="button" class="mui-btn mui-btn-outlined span3 button1" >打赏</button>

				<div class="flex magin-120" >
					<div class="flex-1">
						<img class="width-30" src="../img/icon-messages.png" />
					</div>
					<div class="flex-1">
						<img class="width-30" src="../img/icon-collect.png" />
					</div>
					<div class="flex-1">
						<img class="width-30" src="../img/icon-share.png" />
					</div>
				</div>
			</div>

		</div>
		<!--第二种样式-->
		<div class="flex h-center div1">
			<div class="flex-1">
				<img class="width" src="../img/head-01.png" />

			</div>
			<div class="flex-4">
				<div>
					<span class="span1">王大珂</span>
					<span class="span2">3小时前</span>
				</div>
				<div class="margin-5px">
					<span class="span3">贝多芬的悲伤</span>
				</div>
				<div id="id2" class="flex margin-5px">
					<div class="flex-1 div2">
						<div class="flex v-center width div3">
							<div class="div4">
								<img class="img1" src="../img/play-1.png" />
							</div>
						</div>
					</div>
					<img class="flex-1 img2" src="../img/bg-02.png" />
				</div>
				
				<div class="flex v-center width" style="height: 30px;">
					<img class="width-30" src="../img/icon-star.png" />
					<span >钢琴家</span>
					<span class="yellow">+ 5</span>
						
				</div>
				<div class="flex v-center width" style="height: 30px;">
					
					<span class="blue">钢琴家 :</span>
					<span class="gray">还不错,继续努力哦!</span>
						
				</div>

			</div>
			<div class="flex-2">

				<button type="button" class="mui-btn mui-btn-outlined span3 button1">打赏</button>

				<div class="flex magin-120" >
					<div class="flex-1">
						<img class="width-30" src="../img/icon-messages.png" />
					</div>
					<div class="flex-1">
						<img class="width-30" src="../img/icon-collect.png" />
					</div>
					<div class="flex-1">
						<img class="width-30" src="../img/icon-share.png" />
					</div>
				</div>
			</div>

		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="..js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			
			document.getElementById("id1").addEventListener('tap', function() {
				mui.openWindow({
				    url:'classroom-particulars.html',
				});
			});
			document.getElementById("id2").addEventListener('tap', function() {
				mui.openWindow({
				    url:'classroom-particulars.html',
				});
			});
			
		</script>
	</body>

</html>